<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" type="text/css" href="../../../css/mui.min.css" />
	<link rel="stylesheet" type="text/css" href="../../../css/mescroll.min.css" />
	<link rel="stylesheet" type="text/css" href="../../../css/pages/neighborList.css" />
</head>

<body style="background-color: #fff;">
	<div class="loading-warpper" id="loading">
		<div class="loading">
			<div class="item1"></div>
			<div class="item2"></div>
		</div>
	</div>
	<header class="mui-bar mui-bar-nav">
		<div id="header"></div>
		<div class="header">
			<a class="mui-action-back mui-icon mui-icon mui-icon-arrowleft"></a>
			<h1 class="mui-title" id="title" style="opacity: 0;">我发布的</h1>
		</div>
	</header>
	<div id="mescroll" class="mescroll">
		<div class="">
			<div id="content"></div>
			<div class="header-title">我发布的</div>
			<div class="moments">
				<div class="list" v-if="list.length > 0">
					<div class="item p-b-20" v-for="item in list" @click="commentTap(item.dynID)">
						<!--用户头像-->
						<div class="item-portrait">
							<img :src="item.icon || '../../../images/user/moren.png' "  alt="" />
						</div>
						<div class="item-desc">
							<!--用户昵称-->
							<div class="desc-header m-b-10">
								<div class="user">
									<span class="user-name" v-text="item.periNickname || '小区住户' "></span>
								</div>
								<!--发布时间-->
								<div class="desc-time">{{item.dynCD | timeago}}</div>
							</div>
							<!--发布文本内容-->
							<div class="desc-text m-b-10" v-text="item.dynDetails"></div>
							<!--发布的图片-->
							<div class="desc-image">
								<img v-for="(son,index) in item.filesList" 
								v-if="item.filesList && item.filesList.length == 1" 
								class="image-1" 
								:imgurl="son.filesPath"
								src="../../../images/jiazai.gif"
								/>
								<img v-for="(son,index) in item.filesList" 
								v-if="item.filesList && item.filesList.length == 2" 
								class="image-2" 
								:imgurl="son.filesPath"
								src="../../../images/jiazai.gif"
								/>
								<img v-for="(son,index) in item.filesList" 
								v-if="item.filesList && item.filesList.length > 2" 
								class="image-3" 
								:imgurl="son.filesPath"
								src="../../../images/jiazai.gif"
								/>
							</div>
							<!--点赞和评论数-->
							<div class="operation-warpper">
								<div class="comment">
									<img src="../images/pinglun.png">{{item.commentNumber}}
								</div>
								<div class="like">
									<img :src="item.isLike==0?'../images/zan_n.png': '../images/zan_y.png' "> {{item.likeNumber}}
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="issue" id="issue">
		<div class="issue-iocn">
			<img src="../../../images/neighbor/add.png">
		</div>
	</div>
	<script src="../../../js/Width.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/mescroll.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/Util.js" type="text/javascript" charset="utf-8"></script>
	<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
	<script type="text/javascript">
		mui.init()
		var title = document.getElementById('title');
		var mescroll;
		mui.plusReady(function () {
			if (!mui.os.android) {
				FastClick.attach(document.body);
			}
			Util.StatusbarHeight('header');
			Util.StatusbarHeight('content');

			mescroll = new MeScroll("mescroll", {
				down: {
					auto: false,
					callback: downCallback
				},
				up: {
					callback: upCallback,
					page: {
						num: 0,
						size: 10
					},
					lazyLoad: {
						use: true,
						attr: 'imgurl',
						showClass: 'mescroll-lazy-in',
						delay: 500,
						offset: 200
					},
					empty: {
						warpId: "mescroll",
						icon: "../../../images/zanwu.png",
						tip: "你还没有发布呢~",
						btntext: "",
						btnClick: null,
						supportTap: false
					},
					htmlNodata: '<p class="upwarp-nodata">-- 没有更多数据了 --</p>',
					onScroll: function (mescroll, y, isUp) {
						var height = 30
						if (y > height) {
							var opacity = y / 140
							opacity = opacity > 1 ? 1 : opacity
							title.style.opacity = opacity
						} else {
							title.style.opacity = 0
						}
					}
				}
			})
		})

		window.addEventListener('issueBack', function (msg) {
			//自定义方法，刷新数据，不刷新页面
			downCallback();
		})

		mui("#issue")[0].addEventListener("tap", function () {
			mui.openWindow({
				url: 'issue.html',
				id: 'issue.html',
				styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
					titleNView: { // 窗口的标题栏控件
						titleText: '发布动态', // 标题栏文字,当不设置此属性时，默认加载当前页面的标题，并自动更新页面的标题        
						backgroundColor: "#ffffff", // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"
						autoBackButton: true,
					}
				},
				waiting: {
					autoShow: false
				}
			})
		})

		var app = new Vue({
			el: "#mescroll",
			data: {
				id: '',
				list: []
			},
			filters: {
				timeago: function (value) {
					return Util.timeago(value)
				}
			},
			updated: function (){
				setTimeout(function(){
					document.getElementById('loading').style.display = 'none'
				},500)
			},
			methods: {
				commentTap: function (dynID) {
					this.id = dynID
					var that = this;
					mui.openWindow({
						url: 'details.html',
						id: 'details.html',
						styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
							titleNView: { // 窗口的标题栏控件
								titleText: "详情", // 标题栏文字,当不设置此属性时，默认加载当前页面的标题，并自动更新页面的标题         // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000"
								titleSize: "17px", // 字体大小,默认17px
								backgroundColor: "#ffffff", // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"
								autoBackButton: true,
								buttons : [{
									text: "删除",
									color: '#4FA7E6',
									float: 'right',
									fontSize: '16px',
									onclick: that.clickButton
								}]
							},
						},
						extras: {
							dynID: dynID,
						},
						waiting: {
							autoShow: false
						}
					})
				},
				clickButton: function () {
					var dynID = this.id
					console.log(dynID)
					mui.post(Util.HTTP + 'api/Dynamics/DeleteDynamics',{
						dynID: dynID
					},function(res){
						mui.toast(res.message)
					})
				}
			},
		})



		function downCallback() {
			console.log('执行')
			app.list = []
			mescroll.resetUpScroll();
		}

		function upCallback(page) {
			mui.post(Util.HTTP + 'api/Dynamics/GetMyDynamics', {
				userID: Util.getState('$state').userID,
				page: page.num,
				number: page.size
			}, function (res) {
				if (res.code == 1001) {
					console.log(res.data.length)
					mescroll.endSuccess(res.data.length);
					app.list = app.list.concat(res.data)
				} else {
					mui.toast(res.message)
				}
			})

		}
	</script>
</body>

</html>
